<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> -->
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <!--[if lt IE 9]>
  <script src="js/lib/html5shiv.min.js"></script>
  <![endif]-->
  <meta name="apple-mobile-web-app-capable" content="yes">  <!-- 苹果允许全屏模式 -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black">  <!-- 苹果浏览器顶部状态栏颜色 -->
  <meta name="format-detection" content="telephone=no">  <!-- 忽略数字为电话号码 -->
  <link rel="apple-touch-icon-precomposed" href="favicon.ico">
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
	<title>three.js example</title>
	<link rel="stylesheet" href="../../public/css/lib/normalize.css">
  <style type="text/css">
  body {
    margin: 0;
  }
  canvas {
    display: block;
  }
  </style>
</head>
<body>
  <div id="statsOutput"></div>
  <div id="container"></div>
    <!-- 引入脚本 -->
  <script src="../../public/js/lib/three-r71.min.js"></script>
  <script src="../../public/js/lib/stats.min.js"></script>
  <script src="../../public/js/lib/Detector.js"></script>
  <script src="../../public/js/lib/dat.gui.min.js"></script>
	<script>
  //three.js start here
  (function(){
    if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

          var container, stats;

          var camera, scene, renderer;

          var mesh;

          init();
          animate();

          function init() {

            container = document.getElementById( 'container' );

            //

            camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 3500 );
            camera.position.z = 2750;

            scene = new THREE.Scene();
            scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );

            //

            scene.add( new THREE.AmbientLight( 0x444444 ) );

            var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
            light1.position.set( 1, 1, 1 );
            scene.add( light1 );

            var light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
            light2.position.set( 0, -1, 0 );
            scene.add( light2 );

            //

            var triangles = 50000;

            var geometry = new THREE.BufferGeometry();

            // break geometry into
            // chunks of 21,845 triangles (3 unique vertices per triangle)
            // for indices to fit into 16 bit integer number
            // floor(2^16 / 3) = 21845

            var chunkSize = 21845;

            var indices = new Uint16Array( triangles * 3 );

            for ( var i = 0; i < indices.length; i ++ ) {

              indices[ i ] = i % ( 3 * chunkSize );

            }

            var positions = new Float32Array( triangles * 3 * 3 );
            var normals = new Float32Array( triangles * 3 * 3 );
            var colors = new Float32Array( triangles * 3 * 3 );

            var color = new THREE.Color();

            var n = 800, n2 = n/2;  // triangles spread in the cube
            var d = 12, d2 = d/2; // individual triangle size

            var pA = new THREE.Vector3();
            var pB = new THREE.Vector3();
            var pC = new THREE.Vector3();

            var cb = new THREE.Vector3();
            var ab = new THREE.Vector3();

            for ( var i = 0; i < positions.length; i += 9 ) {

              // positions

              var x = Math.random() * n - n2;
              var y = Math.random() * n - n2;
              var z = Math.random() * n - n2;

              var ax = x + Math.random() * d - d2;
              var ay = y + Math.random() * d - d2;
              var az = z + Math.random() * d - d2;

              var bx = x + Math.random() * d - d2;
              var by = y + Math.random() * d - d2;
              var bz = z + Math.random() * d - d2;

              var cx = x + Math.random() * d - d2;
              var cy = y + Math.random() * d - d2;
              var cz = z + Math.random() * d - d2;

              positions[ i ]     = ax;
              positions[ i + 1 ] = ay;
              positions[ i + 2 ] = az;

              positions[ i + 3 ] = bx;
              positions[ i + 4 ] = by;
              positions[ i + 5 ] = bz;

              positions[ i + 6 ] = cx;
              positions[ i + 7 ] = cy;
              positions[ i + 8 ] = cz;

              // flat face normals

              pA.set( ax, ay, az );
              pB.set( bx, by, bz );
              pC.set( cx, cy, cz );

              cb.subVectors( pC, pB );
              ab.subVectors( pA, pB );
              cb.cross( ab );

              cb.normalize();

              var nx = cb.x;
              var ny = cb.y;
              var nz = cb.z;

              normals[ i ]     = nx;
              normals[ i + 1 ] = ny;
              normals[ i + 2 ] = nz;

              normals[ i + 3 ] = nx;
              normals[ i + 4 ] = ny;
              normals[ i + 5 ] = nz;

              normals[ i + 6 ] = nx;
              normals[ i + 7 ] = ny;
              normals[ i + 8 ] = nz;

              // colors

              var vx = ( x / n ) + 0.5;
              var vy = ( y / n ) + 0.5;
              var vz = ( z / n ) + 0.5;

              color.setRGB( vx, vy, vz );

              colors[ i ]     = color.r;
              colors[ i + 1 ] = color.g;
              colors[ i + 2 ] = color.b;

              colors[ i + 3 ] = color.r;
              colors[ i + 4 ] = color.g;
              colors[ i + 5 ] = color.b;

              colors[ i + 6 ] = color.r;
              colors[ i + 7 ] = color.g;
              colors[ i + 8 ] = color.b;

            }

            geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
            geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
            geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
            geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );

            var offsets = triangles / chunkSize;

            for ( var i = 0; i < offsets; i ++ ) {

              var offset = {
                start: i * chunkSize * 3,
                index: i * chunkSize * 3,
                count: Math.min( triangles - ( i * chunkSize ), chunkSize ) * 3
              };

              geometry.offsets.push( offset );

            }

            geometry.computeBoundingSphere();

            var material = new THREE.MeshPhongMaterial( {
              color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
              side: THREE.DoubleSide, vertexColors: THREE.VertexColors
            } );

            mesh = new THREE.Mesh( geometry, material );
            scene.add( mesh );

            //

            renderer = new THREE.WebGLRenderer( { antialias: false } );
            renderer.setClearColor( scene.fog.color );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );

            renderer.gammaInput = true;
            renderer.gammaOutput = true;

            container.appendChild( renderer.domElement );

            //

            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            container.appendChild( stats.domElement );

            //

            window.addEventListener( 'resize', onWindowResize, false );

          }

          function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

          }

          //

          function animate() {

            requestAnimationFrame( animate );

            render();
            stats.update();

          }

          function render() {

            var time = Date.now() * 0.001;

            mesh.rotation.x = time * 0.25;
            mesh.rotation.y = time * 0.5;

            renderer.render( scene, camera );

          }
  })();
  </script>
</body>
</html>